<template>
  <div>
    <DialogStyle>
      <el-dialog
        title="新增点位"
        :visible="dialogVisible"
        width="750px"
        :close-on-click-modal="false"
        @close="dialogClose"
        @open="dialogOpen"
      >
        <!-- 表单内容 -->
        <el-form ref="deptRef" :rules="deptRules" :model="formData" label-width="150px" style="padding-left:100px">
          <el-form-item prop="name" label="点位名称：">
            <el-input v-model="formData.name" placeholder="请输入" style="width:400px" />
          </el-form-item>
          <el-form-item prop="regionId" label="所在区域：">
            <el-select v-model="formData.regionId" style="width:400px" placeholder="请选择">
              <el-option
                v-for="item in blockList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select></el-form-item>
          <el-form-item prop="businessId" label="所属商圈：">
            <el-select v-model="formData.businessId" style="width:400px" placeholder="请选择">

              <el-option
                v-for="item in businessList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="ownerName" label="归属合作商：">
            <el-select v-model="formData.ownerName" style="width:400px">

              <el-option
                v-for="item in partnerList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="addr" label="详细地址：">
            <el-cascader :options="options" style="width:400px;">
              <template slot-scope="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
              </template>
            </el-cascader>
            <el-input
              v-model="formData.desc"
              style="width:400px;margin-top:10px"
              type="textarea"
              :rows="5"
              placeholder="请输入详细地址"
            />
          </el-form-item>
        </el-form>
        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button style="margin-right:50px" @click="dialogClose">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
      <DialogStyle /></dialogstyle></div>
</template>

<script>
import { addNodeApi, businessType, blockSearchList, partnerSearch } from '@/api'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      deptRules: {
        name: [
          { required: true, message: '请输入', trigger: ['blur', 'change'] }
        ],
        regionId: [
          { required: true, trigger: ['blur', 'change'] }
        ],
        businessId: [
          { required: true, trigger: ['blur', 'change'] }
        ],
        ownerName: [
          { required: true, message: '请输入', trigger: ['blur'] }
        ],
        addr: [
          { required: true, message: '请输入', trigger: ['blur'] }
        ]

      },
      options: [

      ],
      formData: {
        addr: '',
        areaCode: 0,
        businessId: '',
        createUserId: 0,
        name: '',
        ownerId: 0,
        ownerName: '',
        regionId: ''
      },
      businessList: [],
      blockList: [],
      partnerList: []
      // formData: JSON.parse(localStorage.getItem('word')) || {}
    }
  },
  methods: {
    async dialogOpen() {
      const res = await businessType()
      this.businessList = res
      const res2 = await blockSearchList({ pageIndex: 1,
        pageSize: 100000 })
      this.blockList = res2.currentPageRecords
      const res3 = await partnerSearch({ pageIndex: 1,
        pageSize: 100000 })
      this.partnerList = res3.currentPageRecords
      // console.log(res3, '1111111111 ')

      // console.log(res)
    },
    // 关闭弹窗
    dialogClose() {
      this.$emit('closeInsideWord')
      this.$refs.deptRef.resetFields()
      this.formData = {
        addr: '',
        areaCode: 0,
        businessId: '',
        createUserId: 0,
        name: '',
        ownerId: 0,
        ownerName: '',
        regionId: ''
      }
    },
    // 重新创建工单
    async submit() {
      // console.log(this.formData, '878946654')
      this.$refs.deptRef.validate(async valid => {
        if (!valid) return
        try {
          await addNodeApi(this.formData)
          this.$message.success('创建成功')
          this.$emit('fetchListFn')
          this.dialogClose()
        } catch (err) {
          this.$message.warning(`创建失败,${err.response.data}`)
        // console.dir(err)
        }
      })
    }
  }
}
</script>

<style>
.dialog-footer{
  margin-right: 250px;
}
</style>
